<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悦听音乐</title>
    <link rel="stylesheet" href="./css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <div class="header">
        <h1 class="logo"><a href="#"></a></h1>
        <ul class="register">
            <li>登录</li>
            <li>设置</li>
        </ul>
    </div>
    <div class="content">
        <div class="content_in">
            <div class="content_left">
                <div class="content_toolbar">
                    <span><i></i>收藏</span>
                    <span><i></i>添加到</span>
                    <span><i></i>下载</span>
                    <span><i></i>删除</span>
                    <span><i></i>清空列表</span>
                </div>
                <div class="content_list" data-mcs-theme="minimal-dark">
                    <ul>
                        <li class="list_title">
                            <div class="list_check"><i></i></div>
                            <div class="list_number"></div>
                            <div class="list_name">歌曲</div>
                            <div class="list_singer">歌手</div>
                            <div class="list_time">时长</div>
                        </li>
                        <li class="list_music">
                            <div class="list_check "><i></i></div>
                            <div class="list_number">1</div>
                            <div class="list_name">最天使
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">于潼</div>
                            <div class="list_time">
                                <span>04:16</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check"><i></i></div>
                            <div class="list_number">2</div>
                            <div class="list_name">圆
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">AGA</div>
                            <div class="list_time">
                                <span>04:09</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check"><i></i></div>
                            <div class="list_number">3</div>
                            <div class="list_name">备爱
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">周思涵</div>
                            <div class="list_time">
                                <span>04:56</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check "><i></i></div>
                            <div class="list_number">4</div>
                            <div class="list_name">难题
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">张罐子</div>
                            <div class="list_time">
                                <span>03:18</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check"><i></i></div>
                            <div class="list_number">5</div>
                            <div class="list_name">耿耿于怀
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">王笑文</div>
                            <div class="list_time">
                                <span>04:55</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check"><i></i></div>
                            <div class="list_number">6</div>
                            <div class="list_name">无人之岛
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">鸣小明</div>
                            <div class="list_time">
                                <span>03:48</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check "><i></i></div>
                            <div class="list_number">7</div>
                            <div class="list_name">你懂得
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">李家鑫</div>
                            <div class="list_time">
                                <span>04:42</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check"><i></i></div>
                            <div class="list_number">8</div>
                            <div class="list_name">得不到你
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">隔壁老樊</div>
                            <div class="list_time">
                                <span>04:27</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check"><i></i></div>
                            <div class="list_number">9</div>
                            <div class="list_name">原谅
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">张玉华</div>
                            <div class="list_time">
                                <span>04:08</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check "><i></i></div>
                            <div class="list_number">10</div>
                            <div class="list_name">笔记
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">周笔畅</div>
                            <div class="list_time">
                                <span>03：49</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check"><i></i></div>
                            <div class="list_number">11</div>
                            <div class="list_name">淘汰
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">陈奕迅</div>
                            <div class="list_time">
                                <span>04:51</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="list_check"><i></i></div>
                            <div class="list_number">12</div>
                            <div class="list_name">有一种悲伤
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="list_singer">A-Lin</div>
                            <div class="list_time">
                                <span>04:11</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content_right">
                <div class="song_info">
                    <a href="javascript:;" class="song_info_pic"><img src="img/song_pic.jpg" alt=""></a>
                    <div class="song_info_name">歌曲名：
                        <a href="javascript:;">最天使</a>
                    </div>
                    <div class="song_info_singer">歌手：
                        <a href="javascript:;">于潼</a>
                    </div>
                    <div class="song_info_ablum">专辑名：
                        <a href="javascript:;">天使</a>
                    </div>

                </div>
                <ul class="song_lyric">
                    <li class="cur0">我最熟悉的是你的名字</li>
                    <li class="cur1">最初的陪伴</li>
                    <li class="cur0">最后的需要</li>
                    <li class="cur2">最后还要自己铭记</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_in">
            <a href="javascript:;" class="music_pre"></a>
            <a href="javascript:;" class="music_play"></a>
            <a href="javascript:;" class="music_next"></a>
            <div class="music_progress_info">
                <div class="music_progress_top">
                    <span class="music_progress_name">最天使/于潼</span>
                    <span class="music_progress_time">00:46/04:18</span>
                </div>
                <div class="music_progress_bar">
                    <div class="music_progress_line">
                        <div class="music_progress_dot"></div>
                    </div>
                </div>
            </div>
            <a href="javascript:;" class="music_mode"></a>
            <a href="javascript:;" class="music_fav"></a>
            <a href="javascript:;" class="music_down"></a>
            <a href="javascript:;" class="music_comment"></a>
            <a href="javascript:;" class="music_only"></a>
            <div class="music_voice_info">
                <a href="javascript:;" class="music_voice_icon"></a>
                <div class="music_voice_bar">
                    <div class="music_voice_line">
                        <div class="music_voice_dot"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mask_bg"></div>
    <div class="mask"></div>
</body>

</html>